import React, { Component } from 'react';
import {
  Form, Tag, Table, Icon, Collapse, Badge
} from 'antd';
import { NavLink } from "dva/router";

import Menu from "./Menu";

import '../Task.less';

function callback(key) {
  console.log(key);
}
const { Panel } = Collapse;
const text = `
  A dog is a type of domesticated animal.
  Known for its loyalty and faithfulness,
  it can be found as a welcome guest in many households across the world.
`;


/* 关联项目
 */
const columns = [
  {
    title: '项目名称',
    dataIndex: 'a',
    key: '1',
    render: (text) => {
      return (<div><Icon style={{ color: "#d9d9d9", marginRight: 16 }} type="link" />{text}</div>);
    }
  }, {
    title: '项目内容',
    dataIndex: 'b',
    key: '2',
  }, {
    title: '项目负责人',
    dataIndex: 'c',
    key: '3',
  }, {
    title: '项目归属部门',
    dataIndex: 'd',
    key: '4',
  }, {
    title: '详情',
    dataIndex: 'e',
    key: '5',
    render: () => {
      return <NavLink to="aa">详情</NavLink>;
    }
  }];

const dataSource = [{
  a: '项目名称',
  b: '项目内容',
  c: '项目负责人',
  d: '项目归属部门',
  e: '详情',
}, {
  a: '项目名称',
  b: '项目内容',
  c: '项目负责人',
  d: '项目归属部门',
  e: '详情',
}, {
  a: '项目名称',
  b: '项目内容',
  c: '项目负责人',
  d: '项目归属部门',
  e: '详情',
}];


/* 关联审批
 */
const columns1 = [
  {
    title: '审批标题',
    dataIndex: 'a',
    key: '1',
    render: () => {
      return (<div className="spbt">
        <div className="spbt-title">请假申请</div>
        <div className="spbt-name">发起人姓名--归属部门</div>
        <p>2017-09-21 08:50:08</p>
      </div>);
    }
  }, {
    title: '审批摘要',
    dataIndex: 'b',
    key: '2',
    render: () => {
      return <Badge status="processing" text="审批撞要内容" />;
    }
  }, {
    title: '审批状态',
    dataIndex: 'c',
    key: '3',
    render: () => {
      return (<div>
        <Badge status="warning" text="部门初审" />
        <div>小龙女</div>
        <p>状态更新：2017-09-21 08:50:08</p>
      </div>);
    }
  }, {
    title: '详情',
    dataIndex: 'd',
    key: '4',
    render: () => {
      return <NavLink to="aa">详情</NavLink>;
    }
  }];

const dataSource1 = [{
  a: '请假申请',
  b: '审批摘要内容',
  c: '部门初审',
  d: '详情',
}, {
  a: '请假申请',
  b: '审批摘要内容',
  c: '部门初审',
  d: '详情',
}, {
  a: '请假申请',
  b: '审批摘要内容',
  c: '部门初审',
  d: '详情',
}];


@Form.create()
export default class TaskDetailRelatedMatters extends Component {
  state = {
    selectedTags: [],
  }

  componentDidMount() {
    /* const { dispatch } = this.props;
    dispatch({
      type: 'profile/fetchBasic',
    }); */
  }

  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        this.props.dispatch({
          type: 'form/submitRegularForm',
          payload: values,
        });
      }
    });
  };
  callback = (key) => {
    console.log(key);
  };

  handleChange(tag, checked) {
    const { selectedTags } = this.state;
    const nextSelectedTags = checked ?
      [...selectedTags, tag] :
      selectedTags.filter(t => t !== tag);
    console.log('You are interested in: ', nextSelectedTags);
    this.setState({ selectedTags: nextSelectedTags });
  }

  /* 验证手机号码 */
  checkPhone = (rule, value, callback) => {
    if (value && !(/^1[0-9]{10}$/).test(value)) {
      callback('请输入正确的手机号码！');
    } else {
      callback();
    }
  };

  render() {
    return (
      <div className="TaskDetail">
        <Collapse defaultActiveKey={['1', "3"]} className="ant-collapse-matters" onChange={callback}>
          <Panel header="关联项目" key="1">
            <Table pagination={false} showHeader={false} size="middle" dataSource={dataSource} columns={columns} />
          </Panel>
          <Panel disabled header="关联合同" key="2" />
          <Panel header="关联审批" key="3">
            <Table pagination={false} size="middle" dataSource={dataSource1} columns={columns1} />
          </Panel>
        </Collapse>
      </div >
    );
  }
}

